【便利ツール】Emmet LiveStyle(Beta)で、ブラウザ・エディタ間のリアルタイム・スタイル反映を試す。

以前、ブログでEmmetをご紹介いたしましたが、またまたEmmetが良さげなツールを開発中です。
現在はまだベータ版ですが公開されていたので一連の流れを試してみました。

アジェンダ

• Emmet LiveStyleとは？
• 環境設定
• 動作確認
• SCSS(Sass)・LESS等のメタ言語の対応は？

Emmet LiveStyleとは？

ブラウザとエディタ間のスタイルをリアルタイムで確認・編集ができるツールみたいです。現在公式サイトでデモ用の動画を確認できます。

環境設定

Emmet LiveStyle を確認するには、設定が必要なので動作確認ができるまでの設定をご紹介します。

今回の動作検証環境

• Windows7
• chrome
• Sublime Text 2

Sublime Text の設定

Sublime Text 側でパッケージのインストール

Sublime Textを開き、[Ctrl] + [Shift] + [p]から[pakage control : Install Pakege]を選択

パッケージ一覧からLive Styleを選択しインストールします。

パッケージPyV8の更新

こちらのサイトからご自分の環境にあったPyV8をダウンロードしておきます。

次にsublime textを起動しメニューの[Preferences]> [Browse Packages...]をクリックしエクスプローラーが立ち上げます。
中身はSublime Text内にインストールされているパッケージ一覧が表示されています。

一覧からpyv8フォルダを探し、一旦バックアップを取っておきます

先ほどPyV8 Binariesからダウンロードしていた、ファイル一式をpyv8フォルダに格納します。

• _PyV8.pyd
• PyV8.py

ここまできたら、Sublime Textを再起動します。

Chromeエクステンション Emmet LiveStyle　をインストール

Chrome ウェブストアのEmmet LiveStyleページからchromeへインストールします。

ここまでで一旦環境設定は完了です。

動作確認

まずSublime TextとChromeを起動し、Chromeデベロッパーツールを開くと[LiveStyle]タブが表示されています。

[LiveStyle]タブを開くと現在表示している画面に反映されているCSS一覧が表示されています。

画面反映用CSSの準備

デモ用に適当なところにsample.cssを作成し、sublime textで開いておきます。

次に、Chrome開発ツールの[LiveStyle]内に先ほど作成したsample.cssを反映するよう設定をします。

LiveStyleでcssの読み込み指定をするには、Sublime Textで対象のcssファイルを開いている必要があります。

エディタ側からブラウザへ反映させる。

以下のように、Sublime Text と Chromeを表示しています。

実際にsample.cssにヘッダーを消すスタイルを記載すると、リアルタイムにブラウザ側へスタイルを反映してくれました。

SCSS(Sass)・LESS等のメタ言語の対応は？

私も皆さんも気になっている、Sass、Scss等への対応はどうなっているの？と思う方もいるかと思います。

以下、公式サイトから引用

Will it work with SASS/SCSS/LESS?
Although I’ve demonstrated live SCSS edit in video above, it’s just an experiment and it’s not ready for use.

It’s pretty easy to resolve SCSS nesting to plain CSS since it’s one-to-one mapping mostly. But when it comes to dynamic features like mixins, math, variables etc., things getting much harder. Of course I can do some basic transforms to create patch for CSS from preprocessor, but it’s very hard to transform CSS changes back to preprocessor.

But I’m not saying it’s impossible. If LiveStyle gets enough attention and funding, I’ll do a research on how to make it possible.

何やらデモ映像では、scss等の中間メタ言語でもデモは可能だけど、まだ実装しないみたいです。ですが今後開発予算がつけば対応するかも？とのことです。

まだベータ版ですが、今後に期待ですね。

ちなみに。。。

scssでコンパイルした、cssを指定しておけばできるのでは？と思いためしてみましたが、scssファイルにフォーカスしたままではリアルタイムで反映してくれず、 コンパイルされたcssにフォーカスした段階で反映しれくれました。。。現状では反映まで1段階の操作をはさめば可能みたいです。。。

参考にさせていただいたサイト

• Emmet LiveStyleで爆速HTML/CSSコーディングの境地へ